<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<lv-form [formGroup]="formGroup" class="formGroup">
  <lv-form-item>
    <lv-form-label lvRequired>
      {{ 'common_name_label' | i18n }}
    </lv-form-label>
    <lv-form-control [lvErrorTip]="baseUtilService.nameErrorTip">
      <input lv-input type="text" formControlName="name" />
    </lv-form-control>
  </lv-form-item>
  <lv-form-item>
    <lv-form-label lvRequired>
      {{ 'protection_cluster_label' | i18n }}
    </lv-form-label>
    <lv-form-control [lvErrorTip]="baseUtilService.requiredErrorTip">
      <lv-select
        formControlName="cluster"
        [lvOptions]="clusterOptions"
        lvValueKey="value"
        lvShowFilter
        lvFilterKey="label"
        lvFilterMode="contains"
        [lvDisabled]="data ? true : false"
      >
      </lv-select>
      <ng-container *ngIf="formGroup.value.cluster">
        <div class="database-table">
          <lv-datatable [lvData]="clusterData" #lvTable>
            <thead>
              <tr>
                <th>{{ 'protection_cluster_label' | i18n }}</th>
                <th>
                  {{ 'protection_auto_protect_es_index_label' | i18n }}
                  <i
                    lv-icon="aui-icon-help"
                    [lv-tooltip]="contentTemplate"
                    class="auto-protect-help"
                    lvColorState="true"
                  ></i>
                  <ng-template #contentTemplate>
                    <span [innerHTML]="protectDatabaseHelp"></span>
                  </ng-template>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let item of lvTable.renderData">
                <td>{{ item.label }}</td>
                <td>
                  <lv-group lvGutter="14px">
                    <lv-switch
                      formControlName="autoProtect"
                      [lvDisabled]="
                        item.extendInfo['auto-protection'] !== 'true'
                      "
                    ></lv-switch>
                    <span
                      *ngIf="!formGroup.value.autoProtect"
                      class="aui-link"
                      (click)="selectTable(item)"
                      >{{ 'common_select_label' | i18n }}</span
                    >
                  </lv-group>
                </td>
              </tr>
            </tbody>
          </lv-datatable>
        </div>
      </ng-container>
    </lv-form-control>
  </lv-form-item>
</lv-form>
